<template>
	<view>
		<!-- 跟进记录 -->

		<view class="container">
			<!-- 内容区域 -->
			<div class="filter-section">
				<view>
					<u-action-sheet :actions="actions" :closeOnClickOverlay="true" :closeOnClickAction="true"
						@select="selectClick" @close="closeSelect" :show="show"></u-action-sheet>
					<view style="display: flex;" @click="show = true">
						<text class="blue" v-if="selectedAction.id ==0">{{selectedAction.name}}</text>
						<text class="yellow" v-if="selectedAction.id ==1">{{selectedAction.name}}</text>
						<text class="green" v-if="selectedAction.id ==2">{{selectedAction.name}}</text>
						<u-icon name="arrow-down"></u-icon>
					</view>
				</view>
				<view slot="right" class="navbar-right" @click="showFilterModal" style="display: flex;">
					<text class="filter-text">筛选</text><u-icon name="arrow-down"></u-icon>
					<!-- <u-icon name="more-dot-fill" color="#fff" size="20" class="more-icon"></u-icon> -->
				</view>
			</div>
			<div class="content">
				<!-- 内容区域 -->
				<GjjlList :dbType="selectedAction.id" ref="gjjlRefs" :shaixuan="shaixuanData"></GjjlList>
				<!-- 任务列表 -->
			</div>
			<!-- 底部tabbar组件 -->
			<tabbar :value="3"></tabbar>

		</view>
		<u-popup @close="close" :show="showpop" :closeable="closeable" :closeOnClickOverlay="closeable" mode="center"
			:round="10">
			<view class="popnoxssty">
				<view class="poptitle">
					过滤
				</view>
				<scroll-view class="scroll-box">
					<!-- scroll-y="false" -->
					<view class="scboxs">
						跟进内容：<u--input style="width: 100%;" placeholder="请输入内容" v-model="genjinNeirong"
							border="bottom"></u--input>
					</view>
					<view class="scboxs" @click="setTime(1)">
						跟进时间：<u--input style="width: 100%;" :value="genjinTime" placeholder="请选择时间"
							border="bottom"></u--input>
					</view>
					<view class="scboxs" style="margin-top: 30rpx;">
						计划类型： <u-action-sheet :actions="genjinactions" :closeOnClickOverlay="true"
							:closeOnClickAction="true"  @close="closeGenjinSelect"
							:show="typeShow">
							<template>
								<u-list style="height: auto;">
									<u-list-item v-for="(item, index) in genjinactions" :key="index"
										style="border-bottom: #999;">
										<view class="list-item"  @click="selectGenjinClick(item)">
											<view >
												<u--image :src="item.url" width="40rpx" height="40rpx"></u--image>
												<text class="item-text">{{ item.name }}</text>
											</view>
										</view>
									</u-list-item>
								</u-list>
							</template>
						</u-action-sheet>
						<view style="display: flex;" @click="typeShow = true">
							<u--image :src="selectedType.url" width="40rpx" height="40rpx"></u--image>
							<text>{{selectedType.name}}</text><u-icon name="arrow-down"></u-icon>
						</view>
					</view>

					<!-- 	<view class="scboxs" @click="setTime(2)">
						创建时间：<u--input style="width: 100%;" :value="creatTime" placeholder="请选择时间"
							border="bottom"></u--input>
					</view> -->
				</scroll-view>
				<view class="save-box" @click="saveClick">
					确定
				</view>
			</view>
		</u-popup>
		<!-- <u-picker :show="typeShow" :columns="typeColumns" @confirm="confirm" @cancel='typeShow = false'></u-picker> -->
		<u-datetime-picker :show="showTimerPicker" :minDate="minTimeDate" :maxDate="maxTimeDate" :formatter="formatter"
			@confirm="onDateTimeConfirm" @cancel="closeTimerPicker" title="选择日期时间" confirmColor="#2979ff">
		</u-datetime-picker>
	</view>
</template>

<script>
	import imgurl from "./genjinImg/edit.png"
	import tabbar from "@/components/tabbar.vue";
	import GjjlList from "./components/gjjlList.vue";
	export default {
		components: {
			tabbar,
			GjjlList
		},
		data() {
			const now = new Date();
			const year = now.getFullYear();
			const month = now.getMonth();
			const day = now.getDate();

			return {

				shaixuanData: {},
				dbType: 0,
				timeType: 0,
				creatTime: '',
				genjinNeirong: '', //跟进内容
				genjinTime: '', //跟进时间
				showTimerPicker: false, //时间选则狂
				datetimeValue: '',
				minTimeDate: Number(new Date(year - 1, 0, 1)), //去年
				maxTimeDate: Number(new Date(year + 1, 11, 31)), // 明年12月31日
				closeable: true,
				showpop: false,
				selectedAction: { //条件筛选 回显变量
					name: '📝今日待办',
					id: 0,
					color: 'blue'
				},
				selectedType: { //过滤窗口回显 变量
					name: '文字记录',
					id: 1,
					url: '/static/genjin/text.png'

				},
				show: false,
				typeShow: false,
				moreShow: false, //更多按钮。。。
				typeColumns: ['深圳', '厦门', '上海', '拉萨'],
				actions: [{
						name: '📝今日待办',
						id: 0,
						color: '#229fff',
					},
					{
						name: '📝待办任务',
						id: 1,
						color: '#ff9500'
					},
					{
						name: '📝跟进记录',
						id: 2,
						color: '#24dca3'
					}
				],
				genjinactions: [{
						name: '文字记录',
						id: 1,
						url: '/static/genjin/text.png'
					},
					{
						name: '发短信',
						id: 4,
						url: '/static/genjin/chat1.png'
					},
					{
						name: '发微信',
						id: 2,
						url: '/static/genjin/wechat.png'
					},
					{
						name: '打电话',
						id: 3,
						url: '/static/genjin/call.png'
					},
					{
						name: '发邮件',
						id: 5,
						url: '/static/genjin/chat.png'
					},
				],
				todoTypeList: [{
						value: 0,
						label: '今日待办'
					},
					{
						value: 1,
						label: '待办任务'
					},
					{
						value: 2,
						label: '跟进记录'
					}
				],
				filterType: 0,
				filterTypeList: [{
					value: 0,
					label: '筛选'
				}],
				title: '',
				isFilterVisible: false, // 控制筛选弹窗显示
				filterParams: {
					content: '', // 跟进内容
					planType: '', // 计划类型
					followTime: '', // 跟进时间
					createTime: '' // 创建时间
				}
			}
		},
		onLoad() {

		},
		created() {

		},
		methods: {
			// 条件筛选

			// 日期格式化
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}点`
				}
				if (type === "minute") {
					return `${value}分`
				}
				return value
			},
			onDateTimeConfirm(e) {
				const date = new Date(e.value);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hour = date.getHours();
				const minu = date.getMinutes();
				// console.log(date, '日期时间', `${year}-${month}-${day} ${hour}:${minu}`);
				// this.datetimeValue = `${year}-${month}-${day} ${hour}:${minu}`;
				this.showTimerPicker = false;
				if (this.timeType == 1) {
					this.genjinTime = `${year}-${month}-${day} ${hour}:${minu}`;
				} else if (this.timeType == 2) {
					this.creatTime = `${year}-${month}-${day} ${hour}:${minu}`;
				}
			},
			// 取消日期时间选择
			closeTimerPicker() {
				this.showTimerPicker = false;
				// this.datetimeValue = "";
				this.switch1 = false;
				if (this.timeType == 1) {
					this.genjinTime = "";
				} else if (this.timeType == 2) {
					this.creatTime = "";
				}
			},
			setTime(index) {
				this.showTimerPicker = true;
				this.timeType = index;
			},
			selectGenjinClick(item) {
				this.selectedType = this.genjinStatus(item.id); //编辑窗口里的状态回显示
				// console.log(item, "selectGenjinClick");
				// this.editShowData.followType = item.id;
				console.log('11',this.typeShow);
				this.typeShow = false

			},
			closeGenjinSelect() {
				this.typeShow = false
			},
			// 跟进状态回显
			genjinStatus(data) {
				const listData = this.genjinactions;
				const option = listData.find(
					item => item.id == data
				);
				return option ? option : '未知';
			},

			closeSelect() {
				this.show = false
			},
			close() {
				this.showpop = false
				// console.log('close');
			},
			selectClick(item) {
				this.selectedAction = item;
				// console.log(item);
				this.$refs.gjjlRefs.getGenjinList(item.id);

			},

			// 显示筛选弹窗
			showFilterModal() {
				this.isFilterVisible = true
				this.showpop = true
				// console.log('显示筛选栏');
			},

			// 隐藏筛选弹窗
			hideFilterModal() {
				this.isFilterVisible = false
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				// console.log('confirm', e)
				this.show = false
			},
			// 确认筛选
			confirmFilter() {
				console.log('筛选条件:', this.filterParams)

				// 执行筛选逻辑
				this.hideFilterModal()

				uni.showToast({
					title: '筛选条件已应用',
					icon: 'success'
				})
			},
			// 保存筛选
			saveClick() {
				let data = {};
				data['neirong'] = this.genjinNeirong;
				data['remindTime'] = this.genjinTime;
				data['followType'] = this.selectedType.id;
				console.log(data, "筛选条件");
				this.shaixuanData = data;
				if (this.genjinTime == "") {
					uni.showToast({
						title: '时间不能为空',
						icon: 'error'
					})
				} else {
					this.$refs.gjjlRefs.getGenjinList(this.selectedAction.id, data);
					this.close()
				}
			},
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		background-color: #f5f7fa;
		/* height: 100vh; */
		/* color: #229fff; */
		/* color: #24dca3; */
		/* color: #ff9500; */
	}

	.yellow {
		color: #ff9500;
	}

	.green {
		color: #24dca3;
	}

	.blue {
		color: #229fff;
	}

	/* 自定义导航栏 */
	.custom-navbar {
		height: 44px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		border-bottom: 1px solid #eee;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}

	.navbar-title {
		font-size: 18px;
		font-weight: bold;
	}

	/* 内容区域 - 减去导航栏和TabBar高度 */
	.content {
		/* flex: 1; */
		height: 100%;
		/* padding: 44px 0 50px; */
		/* 上下内边距等于导航栏和TabBar高度 */
		overflow-y: auto;
	}

	/* 筛选区域 */
	.filter-section {
		display: flex;
		padding: 15px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		justify-content: space-between;
		align-items: center;
	}


	.filter-item {
		flex: 1;
		margin-right: 10px;
	}

	.filter-item:last-child {
		margin-right: 0;
	}

	.contentView {
		overflow-y: auto;
	}

	.task-list {
		/* flex: 1; */
		/* overflow-y: auto; */
	}

	/* 任务卡片 */
	.task-card {
		background-color: #fff;
		margin: 10px 15px;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.task-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.task-title {
		font-size: 16px;
		font-weight: bold;
	}

	.task-status {
		background-color: #ff9500;
		color: #fff;
		padding: 2px 8px;
		border-radius: 10px;
		font-size: 12px;
	}

	.task-info {
		margin-bottom: 10px;
		color: #666;
	}

	.task-project {
		color: #007AFF;
		margin: 5px 0;
	}

	.task-time {
		color: #999;
		font-size: 14px;
		margin: 5px 0;
	}

	.task-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #f0f0f0;
	}

	.follower {
		display: flex;
		align-items: center;
	}

	.follower-avatar {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-color: #007AFF;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		margin-right: 10rpx;
	}

	.create-info {
		margin-left: 10rpx;
		color: #999;
		font-size: 12px;
	}

	.popnoxssty {
		width: 660rpx;
		// padding-bottom: 60rpx;

		.scroll-box {
			/* height: 35vh; */
		}

		.poptitle {
			text-align: center;
			margin-top: 25rpx;
		}

		.scboxs {
			margin: 20rpx 60rpx 0;
			/* margin-left: 60rpx; */
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.inpboxs {
			width: 82%;
			margin-left: 9%;
			/* border: 1px solid #999999; */
			/* display: flex; */
			/* align-items: center; */
			/* justify-content: space-between; */

			margin-top: 10rpx;

			.inpsty {
				margin-left: 20rpx;
			}

			.danwei {
				width: 100%;
				text-align: right;
				margin-right: 20rpx;
			}
		}
	}

	.save-box {
		background-color: #3588e5;
		color: #ffffff;
		width: 60%;
		margin: 40rpx auto;
		text-align: center;
		padding: 20rpx 0;
		border-radius: 16rpx;
	}

	.list-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		justify-content: center;
		border-bottom: 0.5px solid #ccc;
	}

	.list-item>view {
		display: flex;
		width: 180rpx;
		align-items: center;

	}

	.item-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
		border-radius: 6rpx;
	}

	.item-text {
		margin-left: 10rpx;
		font-size: 30rpx;
		color: #303133;
		line-height: 1.5;
	}
</style>